<template>
  <div>
    <div >
      <el-input style="width: 300px" prefix-icon="el-icon-search" v-model="name" placeholder="请输入操作员姓名"></el-input>
      <el-button type="primary" @click="getUserByName">搜索</el-button>
      <el-button type="primary" @click="showAddView()" class="addButton">添加操作员</el-button>
    </div>
    <div>
      <el-table
          :data="user"
          border
          style="width: 100%">
        <el-table-column
            type="selection"
            width="55"
        ></el-table-column>
        <el-table-column
            fixed
            prop="id"
            label="编号"
            width="50">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="120">
        </el-table-column>
        <el-table-column
            prop="username"
            label="账号"
            width="120">
        </el-table-column>
        <el-table-column
            prop="password"
            label="密码"
            width="300">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别"
            width="50">
        </el-table-column>
        <el-table-column  label="头像" width="120" >
          <template #default="scope">
            <el-image  style="width: 70px; height: 70px" :src="scope.row.headImage" alt=""  ></el-image>
          </template>
        </el-table-column>
        <el-table-column
            prop="roles"
            :formatter="rolesList"
            label="角色"
            width="150">
        </el-table-column>
        <el-table-column

            label="操作"
            width="150">
          <template slot-scope="scope">
            <el-button @click="showEditView(scope.$index, scope.row)" size="small" class="el-button--default" type="success">编辑</el-button>
            <el-button type="danger" size="small" class="el-button--danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-button type="danger"  @click="">批量删除</el-button>

    <el-dialog title="更新操作员资料" :visible.sync="dialogFormVisible">
      <el-form :model="updateUser">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="updateUser.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input v-model="updateUser.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="updateUser.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="updateUser.sex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="头像" :label-width="formLabelWidth">
        <el-upload
            class="upload-demo"
            ref="upload"
            action="/files/headImage/upload"
            :limit="1"
            :on-success="handleSuccess2"
            :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload2">上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
          <div>
            <img :src="imageUrl" style="height: 100px;width: 100px;border-radius: 4px" >
          </div>
        </el-form-item>
        <el-form-item label="" :label-width="formLabelWidth">
          <el-input v-model="updateUser.headImage" autocomplete="off" v-show="false"></el-input>
        </el-form-item>
        <el-form-item label="操作员角色" :label-width="formLabelWidth">
          <el-select v-model="value1" multiple placeholder="请选择" value-key="id" change="changeValue">
            <el-option
                v-for="(r,index) in allRoles"
                :key="index"
                :label="r.description"
                :value="r.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doUpdateUser">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加操作员" :visible.sync="dialogFormVisible2">
      <el-form :model="addUser">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="addUser.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input v-model="addUser.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="addUser.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="addUser.sex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="头像" :label-width="formLabelWidth">
        <el-upload
            class="upload-demo"
            ref="upload"
            action="/files/headImage/upload"
            :limit="1"
            :on-success="handleSuccess"
            :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 0px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <div>
          <img :src="imageUrl2" style="height: 100px;width: 100px;border-radius: 4px" >
        </div>

          <el-input v-model="addUser.headImage" autocomplete="off" v-show="false"></el-input>
        </el-form-item>
        <el-form-item label="操作员角色" :label-width="formLabelWidth">
          <el-select v-model="value2" multiple placeholder="请选择" value-key="id" change="changeValue">
            <el-option
                v-for="(r,index) in allRoles"
                :key="index"
                :label="r.description"
                :value="r.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddUser">取 消</el-button>
        <el-button type="primary" @click="doAddUser">确 定</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
import {Message} from "element-ui";

export default {
  name: "User",
  data(){
    return{
      name:'',
      user:[],
      updateUser:{
        name:'',
        username:'',
        password:'',
        sex:'',
        headImage:'',
        roles:[]
      },
      roles:{
        id:'',
        name:'',
        description:''
      },
      value1:[],
      value2:[],
      allRoles:[],
      addUser:{
        name:'',
        username:'',
        password:'',
        sex:'',
        headImage:'',
        roles:[]
      },
      dialogFormVisible:false,
      dialogFormVisible2:false,
      formLabelWidth: '120px',
      imageUrl:'',
      imageUrl2:''
    }
  },
  mounted(){
    this.getUsers()
  },
  methods:{
    //显示编辑操作员对话框
    showEditView(index,data){
      this.initRoles();
      this.updateUser=data;
      this.value1=[];
      this.imageUrl=data.headImage;
      let roles=data.roles;
      roles.forEach(r=>{
        this.value1.push(r.id)
      })
      this.dialogFormVisible = true;
    },
    //显示添加操作员对话框
    showAddView(){
      this.initRoles();
      this.dialogFormVisible2 = true;
    }
    ,
    //获取全部操作员信息
    getUsers(){
      this.getRequest("/user/getUsersWithRoles").then(resp=>{
        if(resp){
          this.user=resp;

        }
      })
    },
    //根据姓名获取操作员
    getUserByName(){
      this.getRequest("/user/getUserByName/"+this.name).then(resp=>{
        if(resp){
          this.user=resp;
        }
      })
    },
    //取数组数据转为字符串放到表格一个字段里
    rolesList(row,column){
      let role = [ ];

      for(var i =0; i<row.roles.length; i++) {

        role.push(row.roles[i].description);
      }
        return role.join(" 、")//列表以逗号分隔
    },
    //获取角色列表
    initRoles(){
      this.getRequest("/role/getRoles").then(resp=>{
        if(resp){
          this.allRoles=resp;
        }
      })
    },
    //更新操作员信息
    doUpdateUser(){
      let l=this.value1.length;
      this.updateUser.roles=[];
      for(let i=0;i<l;i++){
        console.log(this.value1[i]);
        this.roles.id=this.value1[i];
        this.updateUser.roles.push(this.roles);
        this.roles={};//注意这里要将roles重设为空才不会出现异常
        console.log(this.updateUser)
      }
      console.log(this.updateUser)
      this.updateUser.authorities=this.user.authorities;
      this.putRequest("/user/updateUserWithRole",this.updateUser).then(resp=>{
        if(resp){
          this.getUsers();
          this.dialogFormVisible=false;
        }
      })
    },
    //添加操作员信息
    doAddUser(){
      let l=this.value2.length;
      this.addUser.roles=[];
      for(let i=0;i<l;i++){
        console.log(this.value2[i]);
        this.roles.id=this.value2[i];
        this.addUser.roles.push(this.roles);
        this.roles={};//注意这里要将roles重设为空才不会出现异常
        console.log(this.addUser)
      }
      console.log(this.addUser)
      this.postRequest("/user/addUser",this.addUser).then(resp=>{
        if(resp){
          this.getUsers();
          this.dialogFormVisible2=false;
          this.addUser="";
          this.imageUrl2='';
          this.value2='';
        }
      })
    },
    //取消添加操作员
    cancelAddUser(){
      this.dialogFormVisible2 = false;
      this.addUser='';
    },
    //删除操作员信息
    handleDelete(index,data) {
      this.$confirm('此操作将永久删除该操作员信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/user/deleteUser/'+data.id).then(resp=>{
          if(resp){
            this.getUsers();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //文件超出个数限制时的钩子
    handleExceed (files){
      this.$refs.upload.clearFiles()
      this.$refs.upload.handleStart(files[0])
    },
    //添加上传文件
    submitUpload(){

      this.$refs.upload.submit();
    },
    //更新上传文件
    submitUpload2(){

      this.$refs.upload.submit();
    },
    //添加文件上传成功回调
    handleSuccess(res){

      this.imageUrl2=res.obj;
      this.addUser.headImage=res.obj;
      Message.success({message:res.message});
    },
    //更新文件上传成功回调
    handleSuccess2(res){
      this.imageUrl=res.obj;
      this.updateUser.headImage=res.obj;
      Message.success({message:res.message});
    }
  }
}
</script>

<style scoped>
img[src=""],img:not([src]){
  opacity:0;
}
</style>